<template>
  <div class="task-evaluation-management-wrapper">
    <div class="task-evaluation-management-container">
      <div class="task-evaluation-management-header">
        <h1>任务评价管理</h1>
        <p>管理系统中所有任务的评价信息</p>
      </div>

      <div class="toolbar">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchKeyword" 
            placeholder="搜索评价内容..." 
            @keyup.enter="fetchTaskEvaluations"
          />
          <button @click="fetchTaskEvaluations" class="search-button">搜索</button>
        </div>
        <button @click="showAddModal" class="add-evaluation-button">
          <i class="fas fa-plus"></i>
          添加评价
        </button>
      </div>

      <div class="task-evaluation-table-container">
        <table class="task-evaluation-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>任务ID</th>
              <th>雇主ID</th>
              <th>威客ID</th>
              <th>评分</th>
              <th>评价内容</th>
              <th>评价时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="evaluation in evaluations" :key="evaluation.evaluationId">
              <td>{{ evaluation.evaluationId }}</td>
              <td>{{ evaluation.taskId }}</td>
              <td>{{ evaluation.employerId }}</td>
              <td>{{ evaluation.witkeyId }}</td>
              <td>
                <div class="rating">
                  <span v-for="i in 5" :key="i" class="star" :class="{ 'filled': i <= evaluation.score }">
                    ★
                  </span>
                </div>
              </td>
              <td class="content-cell">{{ evaluation.content }}</td>
              <td>{{ formatDate(evaluation.evaluationTime) }}</td>
              <td>
                <div class="action-buttons">
                  <button @click="editTaskEvaluation(evaluation)" class="edit-btn">编辑</button>
                  <button @click="deleteTaskEvaluation(evaluation.evaluationId)" class="delete-btn">删除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="task-evaluation-management-footer">
        <button @click="goBack" class="back-button">返回首页</button>
      </div>
    </div>
  </div>
  
  <!-- 添加/编辑任务评价模态框 -->
  <div v-if="showModal" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h2>{{ isEditing ? '编辑任务评价' : '添加任务评价' }}</h2>
        <button @click="closeModal" class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="saveTaskEvaluation" class="task-evaluation-form">
          <div class="form-group">
            <label for="modalTaskId">任务ID</label>
            <input 
              id="modalTaskId" 
              v-model.number="evaluationForm.taskId" 
              type="number" 
              required
            />
          </div>
          
          <div class="form-group">
            <label for="modalEmployerId">雇主ID</label>
            <input 
              id="modalEmployerId" 
              v-model.number="evaluationForm.employerId" 
              type="number" 
              required
            />
          </div>
          
          <div class="form-group">
            <label for="modalWitkeyId">威客ID</label>
            <input 
              id="modalWitkeyId" 
              v-model.number="evaluationForm.witkeyId" 
              type="number" 
              required
            />
          </div>
          
          <div class="form-group">
            <label for="modalScore">评分 (1-5)</label>
            <input 
              id="modalScore" 
              v-model.number="evaluationForm.score" 
              type="number" 
              min="1"
              max="5"
              required
            />
          </div>
          
          <div class="form-group">
            <label for="modalContent">评价内容</label>
            <textarea 
              id="modalContent" 
              v-model="evaluationForm.content" 
              rows="4"
              required
            ></textarea>
          </div>
          
          <div class="modal-actions">
            <button type="button" @click="closeModal" class="cancel-button">取消</button>
            <button type="submit" class="save-button">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '../api/index.js'

const router = useRouter()
const evaluations = ref([])
const showModal = ref(false)
const isEditing = ref(false)
const searchKeyword = ref('')
const evaluationForm = ref({
  evaluationId: null,
  taskId: null,
  employerId: null,
  witkeyId: null,
  content: '',
  score: 5
})

// 获取任务评价列表
const fetchTaskEvaluations = async () => {
  try {
    const response = await api.get('/task-evaluation/list')
    if (response.code === 0) {
      evaluations.value = response.data
    } else {
      alert('获取任务评价列表失败: ' + response.message)
    }
  } catch (error) {
    console.error('获取任务评价列表失败:', error)
    alert('获取任务评价列表失败，请重试')
  }
}

// 显示添加模态框
const showAddModal = () => {
  isEditing.value = false
  evaluationForm.value = {
    evaluationId: null,
    taskId: null,
    employerId: null,
    witkeyId: null,
    content: '',
    score: 5
  }
  showModal.value = true
}

// 编辑任务评价
const editTaskEvaluation = (evaluation) => {
  isEditing.value = true
  evaluationForm.value = { ...evaluation }
  showModal.value = true
}

// 保存任务评价（添加或编辑）
const saveTaskEvaluation = async () => {
  try {
    let response
    if (isEditing.value) {
      // 编辑任务评价
      response = await api.put('/task-evaluation/update', evaluationForm.value)
    } else {
      // 添加任务评价
      response = await api.post('/task-evaluation/add', evaluationForm.value)
    }
    
    if (response.code === 0) {
      alert(isEditing.value ? '任务评价更新成功' : '任务评价添加成功')
      closeModal()
      fetchTaskEvaluations()
    } else {
      alert(response.message || (isEditing.value ? '任务评价更新失败' : '任务评价添加失败'))
    }
  } catch (error) {
    console.error(isEditing.value ? '任务评价更新失败:' : '任务评价添加失败:', error)
    alert(isEditing.value ? '任务评价更新失败，请稍后重试' : '任务评价添加失败，请稍后重试')
  }
}

// 删除任务评价
const deleteTaskEvaluation = async (evaluationId) => {
  if (!confirm('确定要删除这个任务评价吗？')) {
    return
  }
  
  try {
    const response = await api.delete(`/task-evaluation/delete/${evaluationId}`)
    if (response.code === 0) {
      alert('任务评价已删除')
      fetchTaskEvaluations()
    } else {
      alert('删除任务评价失败: ' + response.message)
    }
  } catch (error) {
    console.error('删除任务评价失败:', error)
    alert('删除任务评价失败，请重试')
  }
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
}

// 返回首页
const goBack = () => {
  router.push('/admin')
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN')
}

onMounted(() => {
  fetchTaskEvaluations()
})
</script>

<style scoped>
.task-evaluation-management-wrapper {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.task-evaluation-management-container {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 40px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  padding: 30px;
  margin: 0 auto;
  box-sizing: border-box;
}

.task-evaluation-management-header {
  text-align: center;
  margin-bottom: 30px;
}

.task-evaluation-management-header h1 {
  color: #333;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
}

.task-evaluation-management-header p {
  color: #666;
  font-size: 18px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  display: flex;
  gap: 10px;
}

.search-box input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.search-button, .add-evaluation-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-button {
  background: #667eea;
  color: white;
}

.search-button:hover {
  background: #5a6fd8;
}

.add-evaluation-button {
  background: #28a745;
  color: white;
}

.add-evaluation-button:hover {
  background: #218838;
}

.task-evaluation-table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.task-evaluation-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.task-evaluation-table th, .task-evaluation-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.task-evaluation-table th {
  background: #e9ecef;
  font-weight: 600;
  color: #495057;
}

.task-evaluation-table tbody tr:hover {
  background: #e3f2fd;
}

.content-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating {
  display: flex;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 18px;
}

.star.filled {
  color: #ffc107;
}

.action-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.edit-btn {
  background: #667eea;
  color: white;
}

.edit-btn:hover {
  background: #5a6fd8;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.delete-btn:hover {
  background: #c82333;
}

.task-evaluation-management-footer {
  margin-top: 30px;
  text-align: center;
}

.back-button {
  padding: 10px 20px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.back-button:hover {
  background: #5a6268;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-button:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.task-evaluation-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.task-evaluation-form .form-group label {
  font-weight: 500;
  color: #333;
}

.task-evaluation-form .form-group input,
.task-evaluation-form .form-group textarea {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

.task-evaluation-form .form-group input:focus,
.task-evaluation-form .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.modal-actions .cancel-button,
.modal-actions .save-button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-button {
  background: #6c757d;
  color: white;
}

.cancel-button:hover {
  background: #5a6268;
}

.save-button {
  background: #667eea;
  color: white;
}

.save-button:hover {
  background: #5a6fd8;
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
  }
  
  .search-box {
    width: 100%;
  }
  
  .search-box input {
    flex: 1;
  }
  
  .task-evaluation-management-container {
    padding: 20px;
  }
  
  .task-evaluation-table {
    font-size: 14px;
  }
  
  .task-evaluation-table th, .task-evaluation-table td {
    padding: 8px 10px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>